<template>

	<view>
		<u-skeleton :loading="isLoading" rows="15">
			<view class="box">
				<!-- <u-skeleton :loading="isLoading" rows="5"> -->

				<u-tabs :list="list" :itemStyle="{ width: '42%',marginBottom:'20rpx'}" :current="current"
					active-color="#30B1B7" lineColor="red" lineWidth="40" @change="tagChange"></u-tabs>

				<view v-if="current == 0">


					<view class="content_score" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); 
					width: 94%; margin-left: 3%;margin-top: 10rpx;">


						<view class="examing-title">
							{{examInfo.name}}
						</view>

						<u-divider></u-divider>

						<view class="score">
							<view class="round" :class="[examInfo.score>=60?'bggreen':'']">
								{{examInfo.score}}分
							</view>
						</view>




						<view style="margin-top: 25rpx; width: 94%; margin-left: 3%;">


							<!-- 修改后 -->
							<view class="y_cell">

								<view class="y_cell_left">
									<view style="float: left;">
										<text class="u-cell-text">开考时间</text>


									</view>
								</view>


								<view class="y_cell_right">
									<view style="float: left;">

										<view class="y_tag floatright y_tag_bgDanger mlw"
											v-if="examInfo.startTime=='' && examInfo.finishTime=='' || examInfo.isFinish===0 &&examInfo.finishTime==''">
											缺考
										</view>

										<view class="y_tag floatright y_tag_bgPrimary mlw" v-else>
											{{examInfo.startTime}}
										</view>

									</view>

								</view>

							</view>




							<view class="y_cell">

								<view class="y_cell_left">
									<view style="float: left;">
										<text class="u-cell-text">交卷时间</text>


									</view>
								</view>


								<view class="y_cell_right">
									<view style="float: left;">

										<view class="y_tag floatright y_tag_bgDanger mlw"
											v-if="examInfo.startTime=='' && examInfo.finishTime==''|| examInfo.isFinish===0 &&examInfo.finishTime==''">
											缺考
										</view>

										<view class="y_tag floatright y_tag_bgPrimary mlw" v-else>
											{{examInfo.finishTime}}
										</view>

									</view>

								</view>

							</view>
							
							
							
							
							
							<view class="y_cell">
							
								<view class="y_cell_left">
									<view style="float: left;">
										<text class="u-cell-text">成绩</text>
							
							
									</view>
								</view>
							
							
								<view class="y_cell_right">
									<view style="float: left;">
							
										<view class="y_tag floatright y_tag_bgDanger mlw"
											v-if="examInfo.isPass==0">
											{{examInfo.score}}分
										</view>
							
										<view class="y_tag floatright y_tag_bgPrimary mlw" v-else>
											{{examInfo.score}}分
										</view>
							
									</view>
							
								</view>
							
							</view>
							
							
							
							<view class="y_cell">
							
								<view class="y_cell_left">
									<view style="float: left;">
										<text class="u-cell-text">排名</text>
							
							
									</view>
								</view>
							
							
								<view class="y_cell_right">
									<view style="float: left;">
							
										<view class="y_tag floatright y_tag_bgPrimary mlw"
											v-if="examInfo.startTime!='' && examInfo.finishTime!='' ">
											第{{examInfo.top}}名
										</view>
							
										<view class="y_tag floatright y_tag_bgDanger mlw" v-if="examInfo.startTime=='' && examInfo.finishTime=='' || examInfo.isFinish===0 &&examInfo.finishTime==''">
											缺考
										</view>
										
							
									</view>
							
								</view>
							
							</view>
							
							
							
							
							<view class="y_cell">
							
								<view class="y_cell_left">
									<view style="float: left;">
										<text class="u-cell-text">及格</text>
							
							
									</view>
								</view>
							
							
								<view class="y_cell_right">
									<view style="float: left;">
							
										<view class="y_tag floatright y_tag_bgDanger mlw"
											v-if="examInfo.isPass==0 ||examInfo.startTime=='' && examInfo.finishTime=='' || examInfo.isFinish==0 ">
											不及格
										</view>
							
										<view class="y_tag floatright y_tag_bgSuccess mlw" v-else>
											及格
										</view>
							
									</view>
							
								</view>
							
							</view>
							
							

						</view>


						<u-button type="primary" 
							@click="resolve(id)">
							查看解析</u-button>
					</view>
					<!-- </u-skeleton> -->
				</view>





				<view v-if="current == 1">
					<view class="box_top" style="padding-bottom: 10rpx;
												width: 96%;
												margin-left: 2%;
												border: 1px solid #eee;
												margin-top: 10rpx;
												box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
						<view style="display: flex;">
							<view class="tops">排名</view>
							<view class="tops">姓名 </view>
							<view class="tops">得分</view>
							<view class="tops">阅卷</view>
						</view>

						<view style="display: flex;" v-for="(item,i) in examInfo.tops" :key="item.id">
							<view class="tops">
								<!-- <u-tag type="primary" class="floatleft" style="margin-left: 40px;" size="mini"
									:text="i+1"></u-tag> -->
									
									<view class="y_tag floatleft y_tag_bgPrimary mlw" style="margin-left: 70rpx; font-size: 12px;">
										{{i+1}}
									</view>
							</view>
							<view class="tops">
								<!-- <u-tag type="primary" plain class="floatleft" style="margin-left: 36px;" size="mini"
									:text="item.name"></u-tag> -->
									<view class="y_tag floatleft mlw" style="margin-left: 70rpx; font-size: 12px;">
										{{item.name}}
									</view>
							</view>
							<view class="tops">
								<!-- <u-tag type="success" class="floatleft" style="margin-left: 36px;" size="mini"
									:text="item.score"></u-tag> -->
									<view class="y_tag floatleft mlw y_tag_bgSuccess" style="margin-left: 70rpx; font-size: 12px;">
										{{item.score}}
									</view>
							</view>
							<view class="tops">
								<!-- <u-tag type="success" class="floatleft" style="margin-left: 36px;" size="mini"
									text="是"></u-tag> -->
									<view class="y_tag floatleft mlw y_tag_bgSuccess" style="margin-left: 70rpx; font-size: 12px;">
										是
									</view>
							</view>
						</view>

					</view>
				</view>








			</view>
		</u-skeleton>
	</view>

</template>

<script>
	import {
		GetMockResult
	} from '../../../../api/brush_questions.js';
	export default {
		data() {
			return {
				id: "",
				isLoading: true,
				examInfo: {},
				endTimestamp: 5000,
				timeData: {},
				state: false,
				//兼容微信小程序初始化计时器为0问题
				ji:false,
				list: [{
						name: "成绩",
					},
					{
						name: "排名",
					}
				],
				current: 0,
			}
		},
		onLoad(val) {
			this.id = val.id;
		},
		onShow() {
			this.bindData();
		},
		methods: {
			//查看解析点击按钮
			resolve() {
				uni.navigateTo({
					url:"/pages/brush_questions/mock_questions/resolve_Mock/resolve_Mock?id="+this.id
				})
			},
		
			bindData() {
				let {
					id
				} = this;
				GetMockResult({
					id: id
				}).then((res) => {
					if (res.result === 0) {
						let endTimestamp = new Date(res.data.endTime.replaceAll("-", "/")).getTime();
						this.examInfo = res.data;
						let temp = endTimestamp - new Date().getTime();
						if (temp <= 0) {
							this.state = false;
							this.endTimestamp = 0;
						} else {
							this.state = true;
							this.endTimestamp = temp;
						}
						this.isLoading = false;

					}
				})

			},
			tagChange(index) {
				this.current = index.index;
				//如报错则用this.current = index代替上行
			},
		}
	}
</script>

<style scoped>
	@import url("/static/main.css");
	@import url("/static/iconfont/icons.css");

	.box2 {
		padding-bottom: 10rpx;
		width: 96%;
		margin-left: 2%;
		border: 1px solid #eee;
		margin-top: 16rpx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.tops {
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		flex: 1;
		text-align: center;
		margin-top: 5rpx;
	}




	.bggreen {
		background: rgb(7, 193, 96) !important;
	}

	,
	.content_score {
		border: 1px solid #eee;
		margin: 20rpx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.round {
		margin: auto;
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		background-color: red;
		line-height: 150rpx;
		text-align: center;
		color: #fff;
		font-weight: 600;
	}

	.examing-title {
		margin-top: 20rpx;
		width: 100%;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
	}
</style>